html, body {
  width: 100%;
  height: 100%;
  overflow: hidden; }
body{
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
*{
  margin:0;
  padding:0;
}
.box{
  width:100%;
  height:100%;
  overflow:hidden;
  >div{
    >div{
      width:100%;
      height:100%;
      overflow:hidden;
    }
    .one{
      width: 100%;
      height: 100%;
      background: url(../../images/1/banner1.png) no-repeat;
      background-size:100% 100%;
      .popup{
        position: absolute;
        width:636px;
        height:356px;
        top:443px;
        left:50%;
        margin-left:-318px;
        background:#ffffff;
        border-radius: 30px;
        display:none;
        dl{
          width:212px;
          float:left;
          dt{
            img{
              width:212px;
              height:212px;
            }
            margin-bottom:24px;
          }
          dd{
            text-align:center;
            font-size:24px;
            color:#333333;
          }
          &:nth-of-type(1){
            margin:48px 48px 0 82px;
          }
          &:nth-of-type(2){
            margin:48px 0 0 0;
          }
        }
      }
      .bg11{
        position: absolute;
        width:513px;
        height:123px;
        background: url(../../images/1/i-Chengdu-2.png) no-repeat;
        background-size:100% 100%;
        bottom:975px;
        left:50%;
        margin-left:-256.5px;
        animation-duration: 1.5s;
      }
      .bg12{
        position: absolute;
        width:364px;
        height:706px;
        background: url(../../images/1/shouji@2x.png) no-repeat;
        background-size: 100% 100%;
        bottom:200px;
        left:50%;
        margin-left:-182px;
        animation-duration: 1.5s;
        animation-delay: 0.5s;
      }
      .bg13{
        position: absolute;
        width:180px;
        height:58px;
        background: url(../../images/1/button@2x.png) no-repeat;
        background-size: 100% 100%;
        bottom:110px;
        left:50%;
        margin-left:-90px;
      }
      .bg14{
        position: absolute;
        width:536px;
        height:26px;
        background: url(../../images/1/icon@2x.png) no-repeat;
        background-size: 100% 100%;
        bottom:30px;
        left:50%;
        margin-left:-268px;
      }
      .bg15{
        position: absolute;
        width:120px;
        height:46px;
        background: url(../../images/1/plone.png) no-repeat;
        background-size: 100% 100%;
        bottom:175px;
        right:129px;
        animation-duration: 1s;
        animation-delay: 1.5s;
      }
      .bg6{
        position: absolute;
        width:36px;
        height:20px;
        background: url(../../images/down.png) no-repeat;
        background-size:100% 100%;
        bottom:30px;
        left:50%;
        margin-left:-18px;
        animation-duration: 1s;
        animation-delay: 2s;
      }
    }
    .two{
      width: 100%;
      height: 100%;
      background:url(../../images/2/bg2.png) no-repeat;
      background-size:100% 100%;
      .bg21{
        position: absolute;
        width:554px;
        height:141px;
        background: url(../../images/2/txt2.png) no-repeat;
        background-size: 100% 100%;
        top:180px;
        left:50%;
        margin-left:-277px;
        animation-duration: 2s;
      }
      .bg22{
        position: absolute;
        width:419px;
        height:547px;
        background: url(../../images/2/man.png) no-repeat;
        background-size: 100% 100%;
        bottom:280px;
        left:50%;
        margin-left:-209.5px;
        animation-delay: 0.5s;

      }
      .bg6{
        position: absolute;
        width:36px;
        height:20px;
        background: url(../../images/down.png) no-repeat;
        background-size:100% 100%;
        bottom:30px;
        left:50%;
        margin-left:-18px;
        animation-duration: 1s;
        animation-delay: 2s;
      }
    }
    .three{
      width: 100%;
      height: 100%;
      background:url(../../images/3/bg3.png) no-repeat;
      background-size:100% 100%;
      .bg31{
        position: absolute;
        width:549px;
        height:142px;
        background: url(../../images/3/txt2.png) no-repeat;
        background-size: 100% 100%;
        top:180px;
        left:50%;
        margin-left:-274.5px;
        animation-duration: 1.5s;
      }
      .bg32{
        position: absolute;
        width:545px;
        height:600px;
        background: url(../../images/3/city.png) no-repeat;
        background-size: 100% 100%;
        bottom:0;
        left:50%;
        margin-left:-272.5px;
        animation-delay: 1s;
        animation-duration: 0.5s;
      }
      .bg33{
        position: absolute;
        width:242px;
        height:344px;
        background: url(../../images/3/map.png) no-repeat;
        background-size: 100% 100%;
        bottom:490px;
        left:274px;
        animation-delay: 1s;
      }
      .bg34{
        position: absolute;
        width:24px;
        height:24px;
        background: url(../../images/3/dot.png) no-repeat;
        background-size: 100% 100%;
        bottom:485px;
        left:256px;
        animation-delay: 1s;
      }
      .bg6{
        position: absolute;
        width:36px;
        height:20px;
        background: url(../../images/down.png) no-repeat;
        background-size:100% 100%;
        bottom:30px;
        left:50%;
        margin-left:-18px;
        animation-duration: 1s;
        animation-delay: 2s;
      }
    }
    .four{
      width: 100%;
      height: 100%;
      background:url(../../images/4/bg4.png) no-repeat;
      background-size:100% 100%;
      .bg41{
        position: absolute;
        width:491px;
        height:315px;
        background: url(../../images/4/clound.png) no-repeat;
        background-size: 100% 100%;
        top:100px;
        left:136px;
        animation-delay: 0.5s;
      }
      .bg42{
        position: absolute;
        width:111px;
        height:150px;
        background: url(../../images/4/ballon.png) no-repeat;
        background-size: 100% 100%;
        bottom:907px;
        left:272px;
        animation-duration: 1s;
        animation-delay: 2s;
      }
      .bg43{
        position: absolute;
        width:628px;
        height:143px;
        background: url(../../images/4/txt.png) no-repeat;
        background-size: 100% 100%;
        bottom:511px;
        left:62px;
        animation-duration: 2s;
      }
      .bg44{
        position: absolute;
        width:711px;
        height:338px;
        background: url(../../images/4/house.png) no-repeat;
        background-size: 100% 100%;
        bottom:96px;
        left:30px;
        animation-duration: 2s;
        animation-delay: 0.2s;
      }
      .bg45{
        position: absolute;
        width:164px;
        height:70px;
        background: url(../../images/4/max.png) no-repeat;
        background-size: 100% 100%;
        bottom:745px;
        left:480px;
        animation-duration: 1s;
        animation-delay: 2s;
      }
      .bg6{
        position: absolute;
        width:36px;
        height:20px;
        background: url(../../images/down.png) no-repeat;
        background-size:100% 100%;
        bottom:30px;
        left:50%;
        margin-left:-18px;
        animation-duration: 1s;
        animation-delay: 2s;
      }
    }
  }

}
